<template>
    <div class="main">
        <div class="head">
            <h1 style="text-align: center;">Todolist</h1>
            <van-cell-group inset style="display: flex;">
                <van-field label="文本" placeholder="请输入文本" 
                    v-model="newTodo"
                    @keyup.enter="addTodo"
                />
                <van-button type="primary" style="text-align: center;width: 90px;"
                @click="addTodo">确认</van-button>
            </van-cell-group>
        </div>
        <div class="foot">
            <van-cell-group inset>
                <ul class="qingdan">
                    <li v-for="(todo, index) in todos" :key="index" style="display: flex; justify-content: space-between;">
                        <van-checkbox v-model="todo.checked">{{ todo.text }}</van-checkbox>
                        <van-button type="danger"@click="removeTodo(index)"  size="small" style="margin-top: 3px;">删除</van-button>
                    </li>
                </ul>
            </van-cell-group>
        </div>
    </div>
    <van-popup v-model:show="show" position="top" :style="{ height: '30%' }" style="
    font-size: 200%;
    text-align: center;">请输入文本</van-popup>
</template>
<script setup>
  import { ref } from 'vue';

  const todos = ref([]);
  const newTodo = ref('');
  const show = ref(false)

  const showup = () => {
      show.value = true;
    };
  const removeTodo = (index) => {
    todos.value.splice(index, 1);
  };
  const addTodo = () => {
    if (newTodo.value.trim() === '') {
    //   alert('你必须输入内容');
    showup()
      newTodo.value = '';
      return;
    }
      todos.value.push({ text: newTodo.value , checked: false});
      newTodo.value = '';
      const inputElement = document.querySelector('.shuru');
      if (inputElement) {
        inputElement.focus(); // 重新聚焦输入框
      }
    
  };
</script>
<style>
.main{
    width: 400px;
    height: 750px;
    border: solid 1px;
}
.head{
    width: 400px;
    height: 100px;
    background-color: aquamarine;
}
.foot{
    height: 650px;
    width: 400px;
        overflow-y: auto;
}
li{
    width: auto;
    height: 40px;
    font-size: 140%;
}
</style>